<template>
  <page-header-wrapper>
    <p id='lookAtMe'></p>
    <!--注意事项-->
    <template slot='content'>
      <LookOut />
    </template>
    <div v-if='!showJudgeResult'>
      <a-anchor
        class='my-anchor'
        :showInkInFixed='true'
        :affix='true'
        @click='handleAnchorClick'>
        <a-anchor-link href='userInfo' title='判题基本信息' />
        <a-anchor-link v-for='(judgeDetail, index) in JudgeDetailList'
                       :key='index'
                       :href='judgeDetail.anchorPoint'
                       :title='judgeDetail.title' />
      </a-anchor>
      
      
      <a-card id='judgeCard' ref='judgeCard'>
        <!--用户信息-->
        <a-row id='userInfo'>
          <a-col :span='20'>
            <a-descriptions
              :bordered='true'
              title='判题信息'>
              <a-descriptions-item label='姓名'>
                {{ judgeInfo.nickName }}
              </a-descriptions-item>
              <a-descriptions-item label='学号'>
                {{ judgeInfo.studentId }}
              </a-descriptions-item>
              <a-descriptions-item label='班级'>
                {{ judgeInfo.clasz }}
              </a-descriptions-item>
              <a-descriptions-item label='提交题目数'>
                {{ judgeInfo.subCount }}
              </a-descriptions-item>
              <a-descriptions-item label='提交时间'>
                {{ judgeInfo.updateTime || '未进行提交' }}
              </a-descriptions-item>
              <a-descriptions-item label='判题人'>
                {{ judgeInfo.judger || '未进行判题' }}
              </a-descriptions-item>
              <a-descriptions-item label='最终评分'>
                {{ judgeInfo.totalScore || '未进行判题' }}
              </a-descriptions-item>
            </a-descriptions>
          </a-col>
        </a-row>
        <a-skeleton active :loading='!allLoading'>
          <!-- 题目信息-->
          <a-row v-for='judgeDetail in JudgeDetailList'>
            <a-col :span='20'>
              <a-divider
                class='judge-title'
                :id='judgeDetail.anchorPoint'>{{ judgeDetail.title }}
              </a-divider>
              <question-page
                :title='judgeDetail.title'
                :markdown-content='judgeDetail.detail'
                :code-template='judgeDetail.answer'
                :tags='judgeDetail.tags'
                :read-only='true' />
              <!-- 评分按钮-->
              <a-row
                type='flex'
                justify='center'
                align='middle'
                class='score-input'>
                <a-col :span='12'>
                  <a-descriptions bordered size='small'>
                    <a-descriptions-item label='题目'>
                      {{ judgeDetail.title }}
                    </a-descriptions-item>
                    <a-descriptions-item label='判题人打分'>
                      <span style='color: red;font-weight: bold;'>{{ judgeDetail.score }}</span>
                    </a-descriptions-item>
                  </a-descriptions>
                </a-col>
                
                <!--这里需要进行对权限进行校验-->
                <a-col :span='4' :offset='1' v-if='mode === "judge"'>
                  <a-slider
                    v-model='judgeDetail.score'
                    :min='0'
                    :max='20' />
                </a-col>
                
                <a-col :span='5' :offset='1' v-if='mode === "judge"'>
                  请进行评分
                  <a-input-number
                    :disabled='mode !== "judge"'
                    v-model='judgeDetail.score'
                    :min='0'
                    :max='20' />
                </a-col>
              
              </a-row>
            </a-col>
          </a-row>
        </a-skeleton>
        
        <div v-if='JudgeDetailList.length !== 0 && mode === "judge"'>
          <!--提交按钮-->
          <a-button
            style='float: right;margin-right: 20px;' @click='reset'>重置
          </a-button>
          <a-button
            type='primary'
            :loading='loading'
            :disabled='loading'
            style='float: right;margin-right: 20px;'
            @click='submitJudge'>提交
          </a-button>
        </div>
      
      
      </a-card>
      <!--空状态-->
      
      <a-empty style='margin-top: 80px;font-size: 25px'
               v-if='allLoading && JudgeDetailList.length === 0'
               description='该学生未进行答题, 系统默认判定为0分' />
    
    
    </div>
    <!--判题结果展示-->
    <judge-result
      v-if='showJudgeResult'
      :total-score='resultObj.totalScore'
      :judge-score-list='resultObj.judgerScoreList'
      :sub-time='resultObj.subTime'
      :judger='resultObj.judger' />
  </page-header-wrapper>
</template>

<script>
import LookOut from '@/views/judge/components/LookOut.vue'
import QuestionPage from '@/views/reply/components/QuestionPage.vue'
import JudgeResult from '@/views/judge/components/JudgeResult.vue'
import { getJudgeDetailList, getJudgeInfo, setJudgeScore } from '@/api/judge'
import { setTimeout } from 'core-js/internals/schedulers-fix'

export default {
  name: 'JudgeDetail',
  components: {
    LookOut,
    QuestionPage,
    JudgeResult
  },
  data() {
    return {
      mode: '',
      userId: '',
      judgeInfo: {},
      num: 0,
      JudgeDetailList: [],
      loading: false,
      allLoading: false,
      showJudgeResult: false,
      resultObj: {}
    }
  },
  created() {
    // 从路径中获取模式 view / judge
    this.mode = this.$route.query.mode
    if (this.mode === undefined) {
      this.mode = 'judge'
    }
    // 从路径中获取新人用户id
    this.userId = this.$route.query.userId
    // 获取判题详情信息
    getJudgeInfo(this.userId).then(response => {
      if (response.data === null) {
        this.$router.push({ path: '/404' })
        return
      }
      this.judgeInfo = response.data
    })
    // 获取用户答题详情
    getJudgeDetailList(this.userId).then(response => {
      this.JudgeDetailList = response.data
      // 生成锚点
      let index = 0
      this.JudgeDetailList.forEach(item => {
        item.anchorPoint = index + ''
        index++
        // 设置默认分数为0
        // 如果分数为空
        if (item.score === null || item.score === '' || item.score === 0) {
          this.$set(item, item.score, 0)
        }
      })
      this.allLoading = true
    })
    
    if (this.mode !== 'judge') {
      // 获取评分详情
      
    }
    
  },
  mounted() {
    setTimeout(() => {
      let srcolls = document.getElementById('lookAtMe')
      srcolls.scrollIntoView({ block: 'start', behavior: 'smooth' })
    }, 500)
  },
  methods: {
    handleAnchorClick(e, link) {
      // 阻止点击的默认事件修改路由
      e.preventDefault()
      let srcolls = document.getElementById(link.href)
      srcolls.scrollIntoView({ block: 'start', behavior: 'smooth' })
    },
    submitJudge() {
      // 判断模式是否为判题模式
      if (this.mode !== 'judge') {
        this.$message.error('无权限修改')
        return
      }
      this.loading = true
      let judgeScore = []
      // 构造数据
      for (let item of this.JudgeDetailList) {
        if (item.score === undefined || item.score === null) {
          // 输出错误信息
          this.$notification['error']({
            message: '必须完成所有评分',
            description: `题目[${item.title}] 未进行评分`
          })
          this.loading = false
          // 跳转到未评分的锚点
          let srcolls = document.getElementById(item.anchorPoint)
          srcolls.scrollIntoView({ block: 'start', behavior: 'smooth' })
          return // 发现有一个未评分退出
        }
        let temp = {
          replyId: item.replyId,
          score: item.score,
          title: item.title
        }
        judgeScore.push(temp)
      }
      // 发送请求
      setJudgeScore(judgeScore).then(response => {
        // 构造成功信息
        this.resultObj.judger = response.data.judger
        this.resultObj.subTime = response.data.subTime
        this.resultObj.subTime = response.data.subTime
        this.resultObj.judgerScoreList = response.data.sysJudgeScoreList
        this.resultObj.totalScore = response.data.totalScore
        setTimeout(() => {
          this.showJudgeResult = true
          this.loading = false
        }, 1500)
      })
      console.log('resultObj', this.resultObj)
    },
    reset() {
      // 将分数全部重置为0
      this.$message.error("重置失败")
    }
  }
}
</script>

<style scoped lang='less'>
.my-anchor {
  font-weight: 520;
  position: fixed;
  padding: 2px;
  top: 245px;
  right: 60px;
  z-index: 2;
}

@media only screen and (max-width: 600px) {
  .my-anchor {
    display: none;
  }
}

#judgeCard {
  background-color: #fff;
  
  .score-input {
    padding: 20px;
    margin: 20px;
  }
}

::v-deep .ant-pro-page-header-wrap-children-content {
  margin: 20px 0 0;
  padding: 0;
}

.judge-title {
  margin-top: 40px;
  margin-bottom: 40px;
}
</style>